<template>
	<view class="public-address">
		<picker mode="multiSelector" :range="region" range-key="name" :value="regionIndex" @change="pickerChange"
			@columnchange="pickerColumnchange">
			<!-- 卡槽 -->
			<slot></slot>
		</picker>
	</view>
</template>

<script>
	import region from './address-code.json'
	export default {
		data() {
			return {
				// 原数组
				oldRegion: region,

				// 处理后的数组
				region: [
					[],
					[],
					[]
				],

				// 选择省市区的下标Index  传则默认选中传递的
				regionIndex: [0, 0, 0]
			};
		},
		props: {
			// 省id
			previnceId: {
				type: [Number],
				default: 11
			},
			// 城市id
			cityId: {
				type: [Number],
				default: 1101
			},
			// 县区id
			countyId: {
				type: [Number],
				default: 110101
			}
		},
		methods: {
			pickerChange(e) {
				// console.log(e)
				this.regionIndex = e.detail.value

				this.$emit('region', this.region[0][this.regionIndex[0]].name + ' ' + this.region[1][this.regionIndex[1]]
					.name + ' ' +
					this.region[2][this.regionIndex[2]].name)
			},
			pickerColumnchange(e) {
				// console.log(e)
				// 第几列滑动
				// console.log(e.detail.column)
				// 第几列滑动的下标
				// console.log(e.detail.value)

				if (e.detail.column === 0) {
					// 声明城市数组
					let cityArr = []
					let countyArr = []
					// 设置下标
					this.regionIndex = [e.detail.value, 0, 0]
					// 改变城市列表
					this.region[1] = this.oldRegion[e.detail.value].children.map(item => {
						cityArr.push({
							name: item.name,
							code: item.code
						})
					})
					this.$set(this.region, 1, cityArr)
					// 改变县区列表
					this.oldRegion[e.detail.value].children[0].children.map(item => {
						countyArr.push({
							name: item.name,
							code: item.code
						})
					})
					this.$set(this.region, 2, countyArr)
				}
				if (e.detail.column === 1) {
					this.regionIndex[1] = e.detail.value
					this.regionIndex[2] = 0
					let countyArr = [];
					this.oldRegion[this.regionIndex[0]].children[this.regionIndex[1]].children.map(item => {
						countyArr.push({
							name: item.name,
							code: item.code
						})
					})
					this.$set(this.region, 2, countyArr)
				}
				if (e.detail.column === 2) {
					this.regionIndex[2] = e.detail.value
				}
			}
		},
		created() {
			let provinceArr = []
			let cityArr = []

			this.oldRegion.map((item, index) => {
				this.region[0].push({
					name: item.name,
					code: item.code
				})
				if (this.previnceId == item.code) {
					provinceArr = item.children
					this.regionIndex[0] = index
				}
			})
			provinceArr.map((item, index) => {
				this.region[1].push({
					name: item.name,
					code: item.code
				})
				if (this.cityId == item.code) {
					cityArr = item.children
					this.regionIndex[1] = index
				}
			})
			cityArr.map((item, index) => {
				this.region[2].push({
					name: item.name,
					code: item.code
				})
				if (this.countyId == item.code) {
					this.regionIndex[2] = index;
				}
			})
		}
	}
</script>

<style lang="scss" scoped>
	.public-address {
		display: flex;
		align-items: center;
	}
</style>
